<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>订单支付</title>
    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
</head>
<body>
    <div style="text-align: center">
        <h3>欢迎进入青少年兴趣课支付平台</h3>
    </div>
    <div style="margin: 20px;">
        <p th:text="${message}"></p>
        <div th:if="${!isPay}">
            <p>
                <span style="font-weight: bold">欲购课程名：</span>
                <span th:text="${courseName}"></span>
            </p>
            <p>
                <span style="font-weight: bold">学员姓名：</span>
                <span th:text="${realName}"></span>
            </p>
            <p>
                <span style="font-weight: bold">手机号：</span>
                <span th:text="${phone}"></span>
            </p>
            <p style="text-align: center">
                <button style="height: 30px; width: 100px; font-size: 16px;">立即支付</button>
            </p>
        </div>
    </div>


    <div id="app">
    </div>

<script>
    $(function () {
        $("button").click(function () {
            const path = window.location.pathname.split("/")
            const orderId = path[path.length-1]
            $.post("/api/order/gotoWapAlipay",{
                orderId
            }, function (res) {
                console.log(res)
                $("#app").html(res.data)
            })
        })
    })
</script>
</body>
</html>